<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'
import { ElMessage } from 'element-plus'
import { User, Tools, MapLocation, Document, Setting, Bell, Warning, Check, InfoFilled, Timer } from '@element-plus/icons-vue'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer'

const router = useRouter()
const userStore = useUserStore()

// 跳转到登录页
const goToLogin = () => {
  router.push('/login')
}

// 跳转到注册页
const goToRegister = () => {
  router.push('/register')
}

// 道路修复信息
const roadRepairInfo = ref([])
const loading = ref(false)

// 加载道路修复信息
const loadRoadRepairInfo = async () => {
  loading.value = true
  try {
    // 创建道路损坏要素图层
    const roadDamageLayer = new FeatureLayer({
      url: 'https://services7.arcgis.com/gcgG56UMRGbwuqfF/arcgis/rest/services/RoadDamageSegment/FeatureServer/0',
      outFields: ['*']
    })

    // 查询道路损坏数据
    const query = roadDamageLayer.createQuery()
    query.where = "1=1"
    query.outFields = ["*"]
    query.returnGeometry = false
    query.orderByFields = ["reportTime DESC"] // 按报告时间降序排序

    const results = await roadDamageLayer.queryFeatures(query)
    const features = results.features.slice(0, 5) // 只取前5条

    // 转换为通知公告格式
    roadRepairInfo.value = features.map((feature, index) => {
      const reportTime = feature.attributes.reportTime ? new Date(feature.attributes.reportTime).toLocaleDateString() : '未知日期'
      const roadName = feature.attributes.roadName || '未命名道路'
      const damageType = feature.attributes.damageType || '道路损坏'
      const status = feature.attributes.status || '待处理'

      let title = ''
      let content = ''

      if (status === '已完成') {
        title = `${roadName}养护工作已完成`
        content = `${roadName}的${damageType}问题已于${feature.attributes.maintainTime || reportTime}完成维修，维修方式为${feature.attributes.maintainMethod || '常规养护'}。`
      } else if (status === '处理中') {
        title = `${roadName}养护工作进行中`
        content = `${roadName}的${damageType}问题正在进行维修，请过往车辆注意安全。`
      } else {
        title = `${roadName}道路损坏报告`
        content = `${roadName}发现${damageType}问题，已于${reportTime}上报，等待处理。`
      }

      return {
        id: index + 1,
        title: title,
        date: reportTime,
        status: status,
        content: content
      }
    })

    loading.value = false
  } catch (error) {
    console.error('加载道路修复信息失败', error)
    loading.value = false

    // 加载失败时使用默认数据
    roadRepairInfo.value = [
      {
        id: 1,
        title: '系统公告',
        date: new Date().toLocaleDateString(),
        status: '已完成',
        content: '欢迎使用道路养护管理系统，您可以在这里查看最新的道路修复信息。'
      }
    ]
  }
}

// 获取状态标签类型
const getStatusType = (status) => {
  switch (status) {
    case '待处理':
      return 'info'
    case '已分配':
      return 'warning'
    case '处理中':
      return 'warning'
    case '已完成':
      return 'success'
    default:
      return 'info'
  }
}

// 页面加载时获取数据
onMounted(() => {
  loadRoadRepairInfo()
})

// 系统特点列表
const features = ref([
  {
    title: '道路养护管理',
    description: '提供全面的道路养护管理功能，包括任务分配、进度跟踪和质量评估',
    icon: Tools
  },
  {
    title: '地理信息系统',
    description: '集成GIS地图，直观显示道路分布、养护区域和任务位置',
    icon: MapLocation
  },
  {
    title: '数据分析报告',
    description: '生成养护工作报告和数据分析，帮助决策和资源分配',
    icon: Document
  },
  {
    title: '用户权限管理',
    description: '根据不同角色提供差异化功能，确保系统安全和高效运行',
    icon: Setting
  }
])
</script>

<template>
  <div class="welcome-container">
    <!-- 顶部导航栏 -->
    <div class="welcome-header">
      <div class="logo-container">
        <img src="../assets/logo.svg" alt="Logo" class="logo" />
        <h1>道路养护管理系统</h1>
      </div>
      <div class="nav-buttons">
        <el-button type="primary" @click="goToLogin">登录</el-button>
        <el-button @click="goToRegister">注册</el-button>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="welcome-content">
      <div class="hero-section">
        <h2>欢迎使用道路养护管理系统</h2>
        <p class="subtitle">高效、智能的道路养护解决方案</p>
        <div class="hero-buttons">
          <el-button type="primary" size="large" @click="goToRegister">立即注册</el-button>
          <el-button size="large" @click="goToLogin">用户登录</el-button>
        </div>
      </div>

      <div class="features-section">
        <h3>系统特点</h3>
        <div class="features-grid">
          <div v-for="(feature, index) in features" :key="index" class="feature-card">
            <el-icon :size="40" class="feature-icon">
              <component :is="feature.icon" />
            </el-icon>
            <h4>{{ feature.title }}</h4>
            <p>{{ feature.description }}</p>
          </div>
        </div>
      </div>

      <div class="info-section">
        <h3>关于系统</h3>
        <p>
          道路养护管理系统是一个专为道路养护工作设计的综合性管理平台。系统面向管理员、养护人员和普通用户，
          提供道路养护任务管理、地理信息展示、数据分析等功能，帮助提高道路养护工作的效率和质量。
        </p>
        <p>
          作为访客，您可以浏览系统的基本信息。注册成为普通用户后，可以查看道路养护信息和进度。
          如果您是养护人员，系统将为您提供任务管理和报告提交等专业功能。
        </p>
      </div>

      <!-- 道路修复信息公示 -->
      <div class="repair-info-section">
        <h3>
          <el-icon><Bell /></el-icon>
          道路修复信息公示
        </h3>
        <p class="section-desc">实时了解最新的道路修复进展，为您的出行提供参考</p>

        <div class="repair-timeline" v-loading="loading">
          <el-empty v-if="roadRepairInfo.length === 0 && !loading" description="暂无道路修复信息"></el-empty>

          <el-timeline v-else>
            <el-timeline-item
              v-for="item in roadRepairInfo"
              :key="item.id"
              :timestamp="item.date"
              placement="top"
              :type="getStatusType(item.status)"
            >
              <el-card class="repair-item">
                <div class="repair-item-header">
                  <h4>{{ item.title }}</h4>
                  <el-tag :type="getStatusType(item.status)" size="small">{{ item.status }}</el-tag>
                </div>
                <p>{{ item.content }}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </div>

    <!-- 页脚 -->
    <div class="welcome-footer">
      <p>© 2023 道路养护管理系统 | 技术支持：XXX团队</p>
    </div>
  </div>
</template>

<style scoped>
.welcome-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

.welcome-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 50px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.logo-container {
  display: flex;
  align-items: center;
}

.logo {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.logo-container h1 {
  font-size: 20px;
  color: #409EFF;
  margin: 0;
}

.nav-buttons {
  display: flex;
  gap: 10px;
}

.welcome-content {
  flex: 1;
  padding: 40px 50px;
}

.hero-section {
  text-align: center;
  margin-bottom: 60px;
  padding: 60px 0;
}

.hero-section h2 {
  font-size: 36px;
  color: #303133;
  margin-bottom: 20px;
}

.subtitle {
  font-size: 18px;
  color: #606266;
  margin-bottom: 30px;
}

.hero-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.features-section {
  margin-bottom: 60px;
}

.features-section h3 {
  font-size: 28px;
  color: #303133;
  text-align: center;
  margin-bottom: 40px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.feature-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: transform 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
}

.feature-icon {
  color: #409EFF;
  margin-bottom: 20px;
}

.feature-card h4 {
  font-size: 20px;
  color: #303133;
  margin-bottom: 15px;
}

.feature-card p {
  color: #606266;
  line-height: 1.6;
}

.info-section {
  background-color: #fff;
  border-radius: 8px;
  padding: 40px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 60px;
}

.info-section h3 {
  font-size: 28px;
  color: #303133;
  margin-bottom: 20px;
}

.info-section p {
  color: #606266;
  line-height: 1.8;
  margin-bottom: 20px;
}

.repair-info-section {
  background-color: #fff;
  border-radius: 8px;
  padding: 40px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 60px;
}

.repair-info-section h3 {
  font-size: 28px;
  color: #303133;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-desc {
  color: #909399;
  margin-bottom: 30px;
}

.repair-timeline {
  padding: 10px 0;
}

.repair-item {
  margin-bottom: 15px;
  border-left: 4px solid #409EFF;
}

.repair-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.repair-item h4 {
  margin: 0;
  color: #303133;
  font-size: 16px;
}

.repair-item p {
  margin: 0;
  color: #606266;
  line-height: 1.6;
}

.visitor-map-section {
  margin-top: 40px;
  padding: 30px;
  background-color: #f8f8f8;
  border-radius: 8px;
  border-left: 4px solid #f56c6c;
  text-align: center;
}

.visitor-map-section h4 {
  font-size: 22px;
  color: #303133;
  margin-bottom: 15px;
}

.visitor-map-section p {
  margin-bottom: 25px;
}

.report-button {
  padding: 12px 25px;
  font-size: 16px;
}

.welcome-footer {
  background-color: #001529;
  color: #fff;
  text-align: center;
  padding: 20px;
  font-size: 14px;
}
</style>
